<template>
	<view class="page">
		<view class="project-card">
			<detailcard v-if="detailinfo.id" :info="detailinfo"></detailcard>
		</view>
		<view class="nav-box">
			<view class="nav-item" v-for="(item,index) in navList" :key="item.id" :class="{'selected' : navSelected == item.id}" @click="tabChange(item.id)">
			{{item.name}}
			</view>
		</view>
		<count :info="detailinfo" v-if="detailinfo.id  && navSelected == 1"></count>
		<stage :info="detailinfo" v-if="detailinfo.id  && navSelected == 2"></stage>
		<member :info="detailinfo" v-if="detailinfo.id  && navSelected == 3"></member>
		<tasktree :info="detailinfo" v-if="detailinfo.id  &&  navSelected == 4"></tasktree>
		<!-- <need v-if="navSelected == 5"></need> -->
		<info :assignment="leader" :participants="participants" :info="detailinfo" v-if="detailinfo.id  && navSelected == 6" @refresh="reload"></info>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import detailcard from '../component/card/detailcard.vue'; 
	import count from '../component/detail/count.vue';
	import stage from '../component/detail/stage.vue';
	import member from '../component/detail/member.vue';
	import tasktree from '../component/detail/tasktree.vue';
	import need from '../component/detail/need.vue';
	import info from '../component/detail/info.vue';
	export default {
		components:{
			detailcard,count,stage,member,tasktree,need,info
		},
		data() {
			return {
				id:null,// 项目id
				userid:null, // 用户id
				detailinfo:{}, // 项目详情
				leader:{},// 负责人列表
				participants:[], // 参与人列表
				navSelected:1, // 导航栏当前选中列表id
				navList:[ // 导航栏列表
					{
						id:1,
						name:'统计'
					},
					{
						id:2,
						name:'项目阶段'
					},
					{
						id:3,
						name:'成员'
					},
					{
						id:4,
						name:'任务树'
					},
					// {
					// 	id:5,
					// 	name:'项目需求'
					// },
					{
						id:6,
						name:'基本信息'
					},
				],
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.projectDetail(option.id);
				this.projectDiagramEmployeeList(option.id);
			}
			
		},
		onShow() {
			let personList = getApp().globalData.personList;
			if(personList.assignment.length > 0 || personList.assignment.id){
			 this.leader = personList.assignment;
			}
			this.participants = personList.participants;
			console.log('show',personList);
			console.log('leader',this.leader);
			console.log('participants',this.participants)
		},
		onUnload(){
			getApp().globalData.personList = {leader:[],participants:[],assignment:[]};
		},
		methods: {
			/**
			 * 导航栏改变触发事件
			 */
			tabChange:function(id){
				this.navSelected = id;
			},
			projectDetail:function(id){
				
				api.projectBoard({id:id}).then(res=>{
					this.detailinfo = res.data.result;
				})
			},
			reload:function(){
				let id = this.id;
				this.projectDetail(id);
				this.projectDiagramEmployeeList(id);
			},
			projectDiagramEmployeeList:function(id){
				let that = this;
				let userinfo = getApp().globalData.userInfo;
				api.projectDiagramEmployeeList({projectId:id}).then(res=>{
					console.log(userinfo.id,res.data);
					let data = res.data.filter(result=>{
						return userinfo.id == result.userId;
					})
					
					if(data.length > 0){
						this.userid = data[0].id;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		min-height: 100vh;
		background-color: #f0f3f6;
		
		.project-card{
			width: calc(100% - 20rpx);
			padding: 0 10rpx;
		}
		.nav-box{
			display: flex;
			height: 80rpx;
			border-radius: 0 30rpx 0 30rpx 0;
			overflow: hidden;
			line-height: 80rpx;
			width: calc(100%  - 40rpx);
			padding: 0 20rpx;
			.nav-item{
				width: calc(100% / 6);
				text-align: center;
				font-size:26rpx;
				
			}
			.selected{
				background-color: rgba(64,158,255,0.2);
				color: #409eff;
				font-weight: bold;
				position: relative;
			}
			.selected::after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 8rpx;
				background-color: #409eff;
			}
		}
	}
</style>
